<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="查看banner">
                <el-table
                        v-loading="loading"
                        ref="bannerTable"
                        :data="bannerTableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="banner图片">
                        <template slot-scope="scope"><img width="187" :src="scope.row.bannerUrl" alt="#"></template>
                    </el-table-column>
                    <el-table-column prop="bannerType" label="banner类别" show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="danger" @click="deleteProd(scope.row._id, scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="上传banner">
                <el-form ref="addProdForm" :rules="rules" :model="bannerData" label-width="120px">
                    <el-form-item label="banner分类" prop="bannerType">
                        <el-select v-model="bannerData.bannerType" placeholder="请选择banner分类">
                            <el-option
                                    v-for="(item, key) in category"
                                    :label="item.name"
                                    @click.native="selectedSubClass = item.subClass"
                                    :value="item.categoryName"
                                    :key="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="banner激活" prop="isPublish">
                        <el-switch v-model="bannerData.isActive"></el-switch>
                    </el-form-item>
                    <el-form-item label="banner图片">
                        <el-upload action="https://upload.qiniup.com"
                                   ref="qiniuImgUpload"
                                   :on-success="uploadSuccess"
                                   :data="qiniuData"
                                   :auto-upload="false"
                                   limit="1"
                                   list-type="picture">
                            <el-button size="small" type="primary">上传商品图片</el-button>
                            <div slot="tip" class="el-upload__tip">请上传一张小于500kb的jpg/png文件</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即上传</el-button>
                        <el-button type="warning" @click="resetAddProd">取消上传</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "secKillProd",
        data() {
            return {
                bannerTableData: [],
                category: [
                    {
                        name: '美妆护肤',
                        categoryName: 'beauty'
                    },
                    {
                        name: '超值百货',
                        categoryName: 'department'
                    },
                    {
                        name: '名品腕表',
                        categoryName: 'watches'
                    },
                    {
                        name: '品质家电',
                        categoryName: 'electrical'
                    },
                    {
                        name: '手机专区',
                        categoryName: 'phone'
                    },
                    {
                        name: '精选配件',
                        categoryName: 'parts'
                    },
                ],
                qiniuData: { token: ''},
                bannerData: {
                    bannerUrl: '',
                    bannerType: '',
                    isActive: false
                },
                rules: {
                    bannerType: [{ required: true, message: '必须选择一个banner分类', trigger: 'change'}]
                }
            }
        },
        methods: {
            // 获取七牛对象存储token
            getQiniuToken() {
                this.$http.getQiniuToken()
                    .then(res=>{
                        this.qiniuData.token = res.data.data;
                    }).catch(()=>{
                    // 请求失败时 弹出确认框让用户重试
                    this.$confirm('没有取得图片上传凭证,请重试!', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(()=>{
                            this.getQiniuToken();
                        })
                        .catch()
                });
            },
            // 触发el-upload的图片上传操作
            imgUpload() {
                this.$refs.qiniuImgUpload.submit();
            },
            // el-upload图片上传成功后回调
            uploadSuccess(res, file, fileList) {
                // 将上传成功后返回的图片链接存到uploadFileList中
                this.uploadFileUrl = `http://pkzr1rkd3.bkt.clouddn.com/${fileList[0].response.hash}`;
                // 将所有信息存放到远程服务器
                if (!!this.uploadFileUrl) {
                    this.bannerData.bannerUrl = this.uploadFileUrl;
                    this.$http.addBanner(this.bannerData)
                        .then(res=>{
                            if (res.data.code = 10001) {
                                this.$message({
                                    message: '恭喜你,添加banner成功!',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: '添加banner失败!',
                                    type: 'error'
                                });
                            }
                            this.resetAddProd();
                            this.clearUploadFile();
                        })
                        .catch(err=>{
                            this.$message({
                                message: '远程服务器未知错误',
                                type: 'error'
                            });
                            this.resetAddProd();
                            this.clearUploadFile();
                        });
                } else {
                    this.$message({
                        message: '图片上传似乎出了点小故障',
                        type: 'danger'
                    });
                }
            },
            onSubmit() {
                this.$refs.addProdForm.validate(validRes => {
                    if(validRes) {
                        this.imgUpload(); // 触发图片上传
                    }else{
                        this.$notify.error({
                            title: '上传错误',
                            message: '请将表单填写完整!'
                        });
                        return false;
                    }
                });

            },
            resetAddProd() {
                // 重置表单域
                this.$refs.addProdForm.resetFields();
            },
            clearUploadFile() {
                this.$refs.qiniuImgUpload.clearFiles();
            }
        },
        created() {
            this.getQiniuToken();
            this.$http.getBanner()
                .then(res=>{
                    if(res.data.code === 10020) {
                        this.bannerTableData = res.data.data;
                        this.$message({
                            message: '恭喜你,获取banner成功!',
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: '获取banner失败!',
                            type: 'error'
                        });
                    }
                })
                .catch(error=>{
                    this.$message({
                        message: '远程服务器未知错误',
                        type: 'error'
                    });
                })
        }
    }
</script>

<style scoped>

</style>
